<template>
	<view>
		<Search :banner="banner"></Search>
	<!-- 	<Classify></Classify>
		<Ticket></Ticket> -->
		<Content
			id="boxFixed"
			:class="{ is_fixed: isFixed }"
			:tab="tab"></Content>
		<view style="height: 140upx"></view>
		<!-- tab切换的loading -->
		<load-list v-if="loadinglist"></load-list>
		<Article
			:Articleend="Articleend"
			v-if="!loadinglist"></Article>
		<!-- 进入页面的loading加载 -->
		<home-load v-if="homeload"></home-load>
		<!-- 没有数据的提示 -->
		<none-data v-if="nonedata"></none-data>
		<!-- 上拉加载 -->
		<view
			class="load-more"
			v-if="loadmore">
			<uni-load-more
				:status="uniload"
				color="#ffcc99"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import Search from './components/search'
	import Ticket from './components/ticket'
	import Classify from './components/classify'
	import Content from './components/content'
	import Article from './components/article'
	// 引入上拉加载组件，来自https://ext.dcloud.net.cn/plugin?id=29,版本1.3.3
	import Uniloadmore from '@/components/uni-load-more/uni-load-more.vue'
	//引入common/cloudfun中封装的公用方法
	import { home, homelist } from '../../common/cloudfun.js'
	// 引入vuex的mapstate
	import { mapState } from 'vuex'
	export default {
		components: {
			Search,
			Ticket,
			Classify,
			Content,
			Article,
			Uniloadmore
		},
		data() {
			return {
				isFixed: false,
				rect: '',
				menutop: '',
				banner: [],
				tab: [],
				Articleend: [],
				loadinglist: false, //tab切换的loading状态
				// 上拉加载值
				pageid: 0,
				nav: '', //tab切换达到的集合
				uniload: 'loading', //上拉加载的状态
				loadmore: false, //隐藏上拉加载
				nonedata: false, //tab切换没有数据的提示
				homeload: true //进入页面的loading加载
			}
		},

		created() {
			//请求轮播数据
			let banner = 'banner'
			let tab = 'tab'
			let listing = 'cat'
			// home(banner)
			// home(tab)
			// 并发批量请求 promise.all,可以批量请求多个接口而且同时得到所有数据
			Promise.all([home(banner), home(tab), homelist(listing, this.pageid)])
				.then(res => {
					console.log(res)
					// 轮播
					this.banner = res[0].data
					// tab的切换
					this.tab = res[1].data
					//滑动tab的第一个，猫的一些数据
					this.Articleend = res[2].data
					// 所以本页数据出来，请求成功后消除loading
					this.homeload = false
				})
				.catch(err => {
					console.log(err)
				})
			//请求轮播数据（以下部分都封装到common/cloudfun.js里面去了）
			// const db = wx.cloud.database() //指定要操作数据库
			// const banner = db.collection('banner') //指定请求哪个集合，也就是哪个JSON数据
			// banner
			// 	.get()
			// 	.then(res => {
			// 		// console.log(res)
			// 		this.banner = res.data
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
			// 请求tab切换
			// const tab = db.collection('tab')
			// tab.get()
			// 	.then(res => {
			// 		console.log(res)
			// 		this.tab = res.data
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
		},

		methods: {
			// 上拉加载
			pullon() {
				let listing = this.nav
				homelist(listing, this.pageid)
					.then(res => {
						console.log(res)
						// 把之前得到的数据和上拉加载的数据做合并：数组合并
						// this.Articleend= [...this.Articleend,...res.data]
						// 如果没有数据了
						if (res.data.length == 0) {
							this.uniload = 'noMore'
						} else {
							// console.log(res)
							// 把之前得到的数据和上拉加载的数据做合并：数组合并
							this.Articleend = [...this.Articleend, ...res.data]
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		},

		onLoad() {
			// 微信开放文档WXml里的createSelectorQuery
			const query = wx.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec(res => {
				// console.log(res)
				this.menutop = res[0].top //节点的距离
			})
		},
		// 监听页面滚动
		onPageScroll(e) {
			// console.log(e)
			this.rect = e.scrollTop //滚动页面距离
		},
		// 上拉加载，生命周期函数只在父组件生效，不在子组件生效
		onReachBottom() {
			// 上拉加载显示组件
			this.loadmore = true
			this.uniload = 'loading'
			console.log('触底')
			this.pageid++
			console.log(this.pageid)
			this.pullon()
		},

		// 计算属性时候会时刻监听数据变化，只要数据发生变化，计算属性就会执行
		computed: {
			// 取出vuex数据仓库里的数据
			...mapState(['list', 'load', 'navmin', 'nonemin']),
			// 取到tab切换的数据
			count() {
				this.Articleend = this.list.listing
			},
			//tab切换的loading状态
			countload() {
				this.loadinglist = this.load.loading
			},

			// 以对象传过来的值
			navdata() {
				this.loadinglist = this.navmin.loading
				this.nav = this.navmin.naving
				this.pageid = this.navmin.pageid
				this.loadmore = this.navmin.uniload
				this.nonedata = this.navmin.nonedata
			},
			// tab切换没有数据的提示//'/'
			noneted() {
				this.nonedata = this.nonemin.nonedata
			},

			// 滑动组件置顶
			namepage() {
				// console.log('执行')
				if (this.rect > this.menutop) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			}
		}
	}
</script>
<!-- 小程序参考 耿职 仿飞猪小程序 腾讯课堂 csdn程序员研修院有相关视频 -->
<style scoped>
	.is_fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}
	.load-more {
		height: 160upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
